<template>
  <div style="width: 50vw">
    <q-dialog ref="dialogRef" @hide="onDialogHide" class="tw-w-full" style="width: 50vw">
      <q-card class="tw-w-full">
        <q-card-section class="q-dialog-plugin tw-w-full">
          <div v-if="props.student" class="tw-space-y-3">
            <div>
              姓名:
              <q-input outlined v-model="student.sname"/>
            </div>
            <div>
              年龄:
              <q-input outlined v-model="student.age" type="number"/>
            </div>
            <div>
              学号
              <q-input outlined v-model="student.snum" disable/>
            </div>
            <div class="tw-grid tw-grid-cols-3 tw-gap-3">
              <div>
                院系:
                <q-input outlined v-model="student.dept"/>
              </div>
              <div>
                专业
                <q-input outlined v-model="student.major"/>
              </div>
              <div>
                班级
                <q-input outlined v-model="student.classnum"/>
              </div>
            </div>
            <div>
              邮箱:
              <q-input outlined v-model="student.email"/>
            </div>
            <div>
              qq:
              <q-input outlined v-model="student.qq"/>
            </div>
            <div>
              电话:
              <q-input outlined v-model="student.tel"/>
            </div>
            <div>
              修改密码:
              <q-input outlined v-model="student.password" type="password"/>
            </div>

          </div>
          <q-card-actions align="right">
            <q-btn color="primary" label="确认" @click="confirm()"/>
            <q-btn color="primary" label="取消" @click="onDialogCancel"/>
          </q-card-actions>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup>
import {ref, defineProps} from "vue";
import {useDialogPluginComponent, useQuasar} from 'quasar'
import {api} from "boot/axios";

const $q = useQuasar()

defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits
])

const {dialogRef, onDialogHide, onDialogOK, onDialogCancel} = useDialogPluginComponent()
let props = defineProps({
  student: {
    type: Object,
    required: true
  }
})
let student = ref(props.student)

function confirm() {
  let formData = new FormData()
  formData.append("sname", student.value.sname)
  formData.append("age", student.value.age)
  formData.append("snum", student.value.snum)
  formData.append("dept", student.value.dept)
  formData.append("major", student.value.major)
  formData.append("classnum", student.value.classnum)
  formData.append("email", student.value.email)
  formData.append("qq", student.value.qq)
  formData.append("tel", student.value.tel)
  formData.append("confirmPassword", student.value.password)

  api(
    {
      url:'/job/student/updateall',
      method: 'post',
      data: formData
  }).then(res=>{
    let data = res.data
    if(data.code === 200){
      $q.notify({
        message: '修改成功',
        color: 'positive',
        position: 'top',
        timeout: 1000
      })}
    else{
      $q.notify({
        message: '修改失败',
        color: 'negative',
        position: 'top',
        timeout: 1000
      })
    }
  })
  onDialogOK()
}


</script>

<style scoped>

</style>
